<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
			border: 1px solid #ccc;
		}
		.clientnum {
			display: flex;
			justify-content: space-between;
		}
		.total,.newclient {
			width: 49%;
			background: #fff;
			display: flex;
			justify-content: space-between;
		}
		.words {
			padding: 12px;
		}
		.userimg1 {
			background: green;
			width: 85px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.userimg2 {
			background: orange;
			width: 85px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.num {
			font-size: 36px;
		}
		.pagetitle {
			font-size: 18px;
		}
		.top {
			padding-left:  20px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.mainbox {
			border: 1px solid #ccc;
			padding: 20px 0;
		}
		.addnew {
			border: 1px solid #ccc;
			padding: 6px 13px;
			border-radius: 4px;
			margin-right: 50px;
		}
		.table {
			border: 1px solid #ccc;
			margin-top: 20px;
		}
		.pagenation {
			text-align: center;
			margin-top: 10px;
		}
		.whitebox {
			background: #fff;
			margin-top: 20px;
		}
		.searchbox {
			text-align: right;
			margin-top: 20px;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}
	</style>
</block>
<block name="content">
	<div class="clientnum">
		<div class="total">
			<div class="words">
				<div class="title">城市合伙人总数</div>
				<div class="num">{$count}</div>
			</div>
			<div class="userimg1"><img src="__PUBLIC__/orderAdmin/img/user.png" alt=""></div>
		</div>
		<div class="newclient">
			<div class="words">
				<div class="title">本月新增合伙人数</div>
				<div class="num">{$thisMonthCount}</div>
			</div>
			<div class="userimg2"><img src="__PUBLIC__/orderAdmin/img/user.png" alt=""></div>
		</div>
	</div>
	<div class="whitebox">
		<div class="mainbox">
			<div class="top">
				<div class="pagetitle">城市合伙人管理</div>
				<el-button type="success" icon="el-icon-circle-plus-outline" class="addnew" @click="toAddPartner">添加城市合伙人</el-button>
			</div>
			<div class="searchbox">
				<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeParam" v-model="param.key">
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<div class="table">
				<el-table :data="tableData" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}">
					<el-table-column prop="name" label="昵称"></el-table-column>
					<el-table-column prop="mobile" label="登录手机"></el-table-column>
					<el-table-column prop="invite_code" label="邀请码"></el-table-column>
					<el-table-column prop="company_name" label="公司"></el-table-column>
					<el-table-column prop="city" label="城市"></el-table-column>
					<el-table-column prop="worker_count" label="师傅人数"></el-table-column>
					<el-table-column prop="status" label="状态">
						<template slot-scope="scope">
							<span v-if="scope.row.status == 1">启用</span>
							<span v-if="scope.row.status == 2">停用</span>
						</template>
					</el-table-column>
					<el-table-column prop="option" label="操作">
						<template slot-scope="scope">
							<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toDetail(scope.row.id)">查看</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
							   @current-change="handleCurrentChange" :page-size="param.size" :total="total"></el-pagination>
			</div>
		</div>
	</div>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    tableData: [
                        {
                            username: "张先生",
                            mobile: "13131313131",
                            invitecode: "2512",
                            city: "深圳",
                            company: "盘古之手",
                            workers: "2300",
                            status: "活跃",
                            option: "查看"
                        },
                        {
                            username: "张先生",
                            mobile: "13131313131",
                            invitecode: "2512",
                            city: "深圳",
                            company: "盘古之手",
                            workers: "2300",
                            status: "活跃",
                            option: "查看"
                        }
                    ],
					param: {
						key: '',
						page: 1,
						size: 10
					},
					total: 0,
                    searchinput: ""
                }
            },
			created: function () {
				this.getData();
            },
            methods: {
                getData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/partner/getData', _this.param, function (data) {
                        if(data.status){
                            _this.total = parseInt(data.data.count);
                            _this.tableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleSizeChange: function (size) {
                    this.param.size = size;
                    this.getData();
                },
                handleCurrentChange: function (page) {
                    this.param.page = page;
                    this.getData();
                },
                changeParam: function () {
					this.param.page = 1;
					this.getData();
                },
                toDetail(id) {
                    window.location.href = HOME_URL + "/orderAdmin/Partner/detail?id=" + id;
                },
                toAddPartner() {
                    window.location.href = HOME_URL + "/orderAdmin/Partner/edit?type=add";
                }
            }
        });
	</script>
</block>
